<html>
<head>
<title>json</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- <link rel="stylesheet" href="demo/css/jquery-ui.css" /> -->
<link rel="stylesheet" href="css/jquery-ui.css" />
<!-- <link rel="stylesheet" href="demo/css/ui.jqgrid.css" /> -->
<link rel="stylesheet" href="css/ui.jqgrid.css" />
<!-- <link rel="stylesheet" href="demo/css/ui.jqgrid-bootstrap.css" /> -->
<!-- <link rel="stylesheet" href="css/ui.jqgrid-bootstrap.css" /> -->
<style>
	html,body {
		margin: 0;
		padding: 0;
		font-size: 75%;
	}
</style>
</head>
<body>
	<table id="jqgrid"></table>
	<div id="pager"></div>
</body>
<!-- <script src="demo/js/jquery.min.js"></script> -->
<script src="js/jquery-1.11.0.min.js"></script>
<!-- <script src="demo/js/i18n/grid.locale-cn.js"></script> -->
<script src="js/i18n/grid.locale-cn.js"></script>
<!-- <script src="demo/js/jquery.jqGrid.min.js"></script> -->
<script src="js/jquery.jqGrid.min.js"></script>
<script>
	$(function() {
		pageInit();
	});
	function pageInit() {
		jQuery("#jqgrid").jqGrid({
			url : 'json',
			datatype : "json",
			colNames : [ 'Inv No', 'Date', 'Client', 'Amount', 'Tax',
					'Total', 'Notes' ],
			colModel : [ {
				name : 'id',
				index : 'id',
				width : 55,
				search : false
			}, {
				name : 'invdate',
				index : 'invdate',
				width : 90
			}, {
				name : 'name',
				index : 'name asc, invdate',
				width : 100
			}, {
				name : 'amount',
				index : 'amount',
				width : 80,
				align : "right"
			}, {
				name : 'tax',
				index : 'tax',
				width : 80,
				align : "right"
			}, {
				name : 'total',
				index : 'total',
				width : 80,
				align : "right"
			}, {
				name : 'note',
				index : 'note',
				width : 150,
				sortable : false
			} ],
			rowNum : 10,
			rowList : [ 10, 20, 30 ],
			pager : '#pager',
			sortname : 'id',
			viewrecords : true,
			sortorder : "desc",
			jsonReader : {
				repeatitems : true,
				cell : "cell",
				id : "0"
			},
			caption : "Data Optimization",
			height : 210
		});
		$("#jqgrid").jqGrid('navGrid', '#pager', {
			edit : false,
			add : false,
			del : false
		});
// 		$("#jqgrid").jqGrid('navButtonAdd', '#pager', {
// 			edit : false,
// 			add : false,
// 			del : false
// 		});
	}
</script>
</html>
